import React, { Component } from 'react';
import { List, InputItem, Toast } from 'antd-mobile';
import { createForm } from 'rc-form';
import RadioComponent from 'views/component/radio/radio';
import { i18n } from 'js/core/i18n';
import './forget.scss';
import api from 'js/api/index';

class Register extends Component {
	state = {
		phoneText: i18n.get('获取验证码'),
		err: {}
	}
	submit = () => {
		this.props.form.validateFields((err, values) => {
			console.log(err, values);
			values.language = window.localStorage.getItem('defaultLanguage') || 'zh-CN';
			if(!values.language || values.language === 'undefined'){
				values.language =  'zh-CN'
			}
			if (!err) {
				// 请求接口
				api('/Home/ForegetPwd', values, 'POST').then(res => {
					if (res.code === 1) {
						Toast.success(i18n.get('成功'), 2)
					} else {
						Toast.fail(res.message, 2)
					}
				});
			}
			this.setState({ err: err || {} });
		});
	}
	// 发送验证码
	sendPhone = () => {
		this.props.form.validateFields(['userphone'], (err, values) => {
			console.log(err, values)
			if (!err) {
				let language = window.localStorage.getItem('defaultLanguage') ;
				if(!language || language === 'undefined'){
					language =  'zh-CN'
				}
				api('/Home/SendCode', { phone: values.userphone, SendType: 2, language: language }).then(res => {
					this.setState({ sendState: true, phoneText: i18n.get('验证码已发送') }, 2);
					this.getTime();
				});
			} else {
				Toast.fail(i18n.get('请输入正确的手机号'), 2);
			}
		});

	}
	getTime = () => {
		let times = 60;
		this.state.timer = setInterval(() => {
			times--;
			if (times <= 0) {
				clearInterval(this.state.timer);
				times = 60;
				this.setState({ sendState: false, phoneText: i18n.get('获取验证码') });
			} else {
				this.setState({ phoneText: times + i18n.get('秒后重试') });
			}
		}, 1000);
	}
	render() {
		let { getFieldProps, setFieldsValue } = this.props.form;
		let { err } = this.state;
		return <div id="register-box">
			<div className="register-container">
				<List>
					<InputItem
						className="mb20"
						{...getFieldProps('userphone', {
							rules: [
								{ required: true, message: ' ', pattern: /1[0-9]{10}$/ },
							],
						})}
						error={err.userphone}
						placeholder={i18n.get("手机")}
						onFocus={() => { delete err.userphone; this.setState({}); }}
					><div className="icon-box mobile"></div></InputItem>
					<div className="flex">
						<InputItem
							className="mb20"
							{...getFieldProps('testcode', {
								rules: [{ required: true, type: 'string' }],
							})}
							error={err.testcode}
							placeholder={i18n.get("输入验证码")}
							className="flex-col-8"
							onFocus={() => { delete err.testcode; this.setState({}); }}
						><div className="icon-box test"></div></InputItem>
						<div className="flex-g-1">
							<button type="buttom" className="btn btn-test fs24" onClick={this.sendPhone}>{this.state.phoneText}</button>
						</div>
					</div>
					<InputItem
						className="mb20"
						type="password"
						{...getFieldProps('password', {
							rules: [{ required: true }, {
								validator: (rule, value, callback) => {
									const form = this.props.form;
									if (value) {
										form.validateFields(['regpassword'], { force: true }); // 给regpassword设置force
									}
									callback();
								}
							}],
						})}
						error={err.password}
						placeholder={i18n.get("输入密码")}
						onFocus={() => { delete err.password; this.setState({}); }}
					><div className="icon-box password"></div></InputItem>
					<InputItem
						className="mb20"
						type="password"
						{...getFieldProps('regpassword', {
							rules: [{ required: true }, {
								validator: (rule, value, callback) => {
									const form = this.props.form;
									if (value && !Object.is(value, form.getFieldValue('password'))) {
										callback('输入的密码不一致！');
									} else {
										callback();
									}
								}
							}],
						})}
						error={err.regpassword}
						placeholder={i18n.get("再次输入密码")}
						onFocus={() => { delete err.password; this.setState({}); }}
					><div className="icon-box password"></div></InputItem>

				</List>
				<div className="login-btn">
					<button type="submit" className="btn btn-primary login-sty" onClick={this.submit}>{i18n.get("确定")}</button>
				</div>
			</div>
		</div>;
	}
}


export default createForm()(Register);
